<template>
    <view class="pub_page pub_invite">
        <pub-head headerName="invite" :headerConfig="headerConfig"></pub-head>
        <div class="pub_page_scroll page_box">
            <!-- <pub-image class="bg_img" :src="canvasUrl" :mode="'widthFix'"></pub-image> -->
            <pub-image class="bg_img" :src="'../../static/aimg/img_84.png'" :mode="'widthFix'"></pub-image>
            <div class="img_box">
                <pub-image class="qrcode_img" :src="canvasUrl"></pub-image>
            </div>
            <div class="btn" @click="beginCanvas">立即邀请</div>
        </div>
        <mosowe-canvas-image ref="mosoweCanvasComponents" @canvasImage="_canvasImage" :lists="mosoweData[mosoweKey].lists"
            :height="mosoweData[mosoweKey].height" :width="mosoweData[mosoweKey].width" />
    </view>
</template>

<script>
export default {
    data() {
        return {
            pagescrollTop: 0,
            headerConfig: {
                title: '',//标题栏内容
                left_type: 3,
                left_content: 'white',
                header_color: 'rgba(0,0,0,0)',//标题栏背景色
            },
            invitationCode: '',

            canvasUrl: '',
            mosoweData: [{
                lists: [
                    {
                        type: 'qr',
                        content: '',
                        x: 0,
                        y: 0,
                        width: 600,
                        height: 600,
                    },
                ],
                width: 600,
                height: 600,
            }, {
                lists: [
                    {
                        type: 'image',
                        content: '../../static/aimg/img_84.png',
                        width: 1125,
                        height: 2346,
                        x: 0,
                        y: 0,
                    },
                    {
                        type: 'qr',
                        content: '',
                        x: 360,
                        y: 1005,
                        width: 405,
                        height: 405,
                    },
                ],
                width: 1125,
                height: 2346,
            }],
            mosoweKey: 0,
        };
    },
    async onLoad(option) {
        // console.log(option);
        this.invitationCode = option.invitationCode;
        let url = this.$comFun.registerURL + '?c=' + option.invitationCode;
        console.log(url);

        this.mosoweData[0].lists[0].content = url;
        this.mosoweData[1].lists[1].content = url;
        setTimeout(() => {
            this.$refs.mosoweCanvasComponents.createCanvas();
        }, 500);
    },
    onPageScroll(res) {
        this.pagescrollTop = res.scrollTop;
    },
    methods: {
        beginCanvas() {
            // #ifndef APP-PLUS
            this.$comFun.toast('请使用 ChatterBot APP');
            // #endif
            // #ifdef APP-PLUS
            this.mosoweKey = 1;
            setTimeout(() => {
                this.$refs.mosoweCanvasComponents.createCanvas();
            }, 500);
            // #endif
        },
        _canvasImage(e) {
            // console.log(e);
            // console.log(this.mosoweKey);
            if (this.mosoweKey == 0) {
                this.canvasUrl = e;
            } else {
                // this.canvasUrl = e;
                // return;
                const that = this;
                uni.showModal({
                    title: '权限申请',
                    content: '用于图片保存，需要申请相机和相册的权限',
                    success: function (res) {
                        if (res.confirm) {
                            // #ifdef APP-PLUS
                            uni.saveImageToPhotosAlbum({
                                filePath: e,
                                success: function () {
                                    console.log('save success');
                                    that.$comFun.toast('保存成功');
                                },
                                fail: function () {
                                    console.log('save error');
                                    that.$comFun.toast('保存失败，请稍后再试');
                                },
                            });
                            // #endif
                        }
                    }
                });

            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/mine.scss";
</style>
